<template>
  <div>
    <el-card v-for="(item,index) in authorList" :key="index" class="box-card">
      <a class="author-name" @click="goAuthorItem(item.aid,item.aname)">{{ `[${item.adynasty}] ${item.aname}` }}</a>
      <p>
        {{ item.adetail }}
      </p>
      <router-link style="color: #0a9178" :to="{path:`/poemList/${item.aname}/${item.aid}`}">{{ item.aname+'的全部诗词' }}</router-link>
    </el-card>
    <el-pagination
        :page-size="10"
        :pager-count="11"
        @current-change="currentChange"
        layout="prev, pager, next"
        :total="total">
    </el-pagination>

  </div>
</template>

<script>
import router from '@/router'
import {reqGetAuthorAll} from '@/API/modules/author'

export default {
  name: "AuthorList",
  data() {
    return {
      authorList: [],
      total: 10
    }
  },

  methods: {
    goAuthorItem(aid, bread) {
      //在出发地印上目的地的名字
      this.$route.meta.toBreadName = bread;
      router.push(`/authorItem/${aid}`)
    },
    async getAuthorAll(val) {
      let result = await reqGetAuthorAll(val)
      if (result.status == 200) {
        this.authorList = result.data.data.records
        this.total = result.data.data.total
      }
    },
    currentChange(val) {
      this.getAuthorAll(val)
    },
  },
  mounted() {
    this.getAuthorAll(1)
  }
}
</script>

<style lang="scss" scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 100%;
  text-align: left;
  margin-bottom: 20px;
}

.author-name {
  font-size: x-large;
  color: $--font-color;

  &:hover {
    cursor: pointer;
    transition: opacity .2s 0s;
    opacity: .5;
  }
}
</style>